﻿//<!--
//date:2014.11.10 20:01
//date:2014.10.26 20:01
//author：杨立浩
//QQ:459281182
//有什么疑问，请联系我!
//files: menuOnLeft.js  menuOnLeft.css defualt.aspx
//-->
//<html>
//<head></head>
//<style type="text/css">
//.DIVItem
//{
//   background-color:#efefef;
//    -moz-transition: background 1s ease-out;
//    -webkit-transition: background 1s ease-out;
//    padding:3px 10px;
//    width:140px;
//    display:block;
//    cursor: pointer;
//}
//.DIVItem_B
//{
//    background-color:#7D7D2D;
//    -moz-transition: background 1s ease-out;
//    -webkit-transition: background 1s ease-out;
//    padding:3px 10px;
//    width:140px;
//    display:block;
//    cursor: pointer;
//}
//.div_menuOnLeft_001
//{
//    position:absolute;
//    left:200px;
//    top:300px;
//    border:1px solid #dfdfdf;
//    width:140px;
//}
//.div_main_001
//{
//    width:400px;
//}
//</style>
//<body>

//<div>
//    <div id="main_001" class="div_main_001">
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfaskkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//<div>sadfsdfafsdfasdfsadfas</div>
//    </div>
//    <div id="menuOnLeft_001"  class="div_menuOnLeft_001"></div>
//</div>


function getAbsLeftTop(p) {
    var _left = 0, _top = 0;
    if (p.offsetParent) {
        while (1) {
            _left += p.offsetLeft;
            _top += p.offsetTop;
            if (!p.offsetParent) {
                break;
            } else if (p.offsetParent.style.position == "absolute") {
                _left += t.offsetParent.offsetLeft;
                _top += t.offsetParent.offsetTop;
                break;
            }
            p = p.offsetParent;
        }
    }
    else if (p.x && p.y) {
        _left += p.x;
        _top += p.y;
    }
    return { "left": _left, "top": _top };
};
g.tool = g.tool || {};
g.tool.menuOnLeft = {
    "variable": { "a": 100, "b": "b", "c": "jack" },
    "record": 0,
    "data": ["hh", "gg", "ff", "ee", "kk", "vv", "xx"],
    "initialize": function () {//initalize...
        g.tool.menuOnLeft.positionAdapt();
        var len = g.tool.menuOnLeft.data.length;
        for (var i = 0; i < len; i++) {
            g.tool.menuOnLeft.insertItem(i, g.tool.menuOnLeft.data[i]);
        }
    },
    "getEle": function () {//get the note of the sidebar.
        var ele = document.getElementById("menuOnLeft_001");
        if (ele == undefined) {
            ele = document.createElementByName("table");
            ele.id = "menuOnLeft_001";
            ele.style.possition = "relative";
            var ele_tr = document.createElementByName("tr");
            ele.appendChild(ele_tr);
            document.body.appendChild(ele);
        }
        return ele;
    },
    "insertItem": function (p_index, p_content) {
        var tmp_item = g.tool.menuOnLeft.decorateItem(p_content);
        var tmp = g.tool.menuOnLeft.getEle();
        if (tmp.children.length == 0) {
            tmp.appendChild(tmp_item);
        } else {
            tmp.insertBefore(tmp_item, tmp.children[p_index - 1]);
        }
    },
    "removeItemByIndex": function (p_index) {
        var tmp = g.tool.menuOnLeft.getEle();
        if (tmp.children.length > 0 && tmp.children[p_index] != undefined) {
            tmp.removeChild(tmp.children[p_index]);
        }
    },
    "updateItem": function (p_index, p_content) {
        var tmp = g.tool.menuOnLeft.getEle();
        var tmpEle;
        if (tmp.children[0].tagName == "TBODY") {
            tmpEle = tmp.children[0].children[0];
        } else {
            tmpEle = tmp.children[0];
        }
        tmpEle.children[p_index].innerHTML = p_content;
    },
    "decorateItem": function (p_content) {
        var tmp_item = document.createElement("a");
        tmp_item.className = "DIVItem";
        tmp_item.onmouseout = function () {
            tmp_item.className = "DIVItem";
        };
        tmp_item.onmouseover = function () {
            tmp_item.className = "DIVItem_B";
        };
        tmp_item.innerHTML = p_content;
        tmp_item.href = "http://baidu.com?key=" + p_content;
        return tmp_item;
    },
    "moveToColumn": function (p_column) {
        window.scrollTo(document.body.scrollLeft, p_column.y)
    },

    /*
    make the position of the menu adapted to the current page.
    case 1: if the whole window is wider than the width of block A and  this menu and 20px:  put it aside the slider.
    case 2: if the whole window is more narrow than the width of "Block A" and  this menu and 20px:  put it aside the "Block A".    */
    "positionAdapt": function () {
        window.onscroll = window.onresize = function ()//当页面滚动或者页面缩放时  
        {
            var tmpEle = g.tool.menuOnLeft.getEle();
            var mainEle = document.getElementById("frameTable");
            var a = getAbsLeftTop(mainEle).top + mainEle.offsetHeight, b = getAbsLeftTop(tmpEle).top + tmpEle.offsetHeight, c = g.tool.menuOnLeft.getScrollTop(); //a:主版块的下边；b:工具条的下边.
            if (a > b || c < g.tool.menuOnLeft.record) {//1、当工具条下边高于主版块下边时。2、滑块上移时，工具条跟着上移。  在以上两种情况下让工具块悬浮。
                tmpEle.style.top = 0 + 'px'; //设置对联的顶部值,g.tool.menuOnLeft.getScrollTop() +s
            }

            var pos;
            var d = getAbsLeftTop(mainEle).left - tmpEle.offsetWidth - 20; //主版块的左边偏20px.
            if (d + tmpEle.offsetWidth < getAbsLeftTop(mainEle).left - 20) {//如果工具条在主版块的右边与滑块的左边，
                pos = document.body.scrollLeft + document.body.clientWidth - 180; //则靠滑块的左边放置工具条。180:工具条的宽度。
            } else {//如果窗口太小，
                pos = d; //则靠主版块的右边放置工具条。
            }
            tmpEle.style.left = pos + "px";
            g.tool.menuOnLeft.record = c;
        };
    },
    "getScrollTop": function () {//返回滚动条的垂直位置。
        if (document.body.scrollTop)
            return document.body.scrollTop;
        else return document.documentElement.scrollTop;
    }
};
g.tool.menuOnLeft.initialize();